<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:500px;"></div>
    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

        
// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
var data0 = splitData([['2016-05-23',17.5,17.68,17.44,17.55],
['2016-05-24',17.48,17.6,17.43,17.55],
['2016-05-25',17.68,17.73,17.6,17.67],
['2016-05-26',17.65,17.86,17.65,17.7],
['2016-05-27',17.69,17.77,17.63,17.74],
['2016-05-30',17.84,17.97,17.68,17.95],
['2016-05-31',17.93,18.4,17.92,18.29],
['2016-06-01',18.3,18.35,18.13,18.19],
['2016-06-02',18.2,18.3,17.93,18.02],
['2016-06-03',18.12,18.13,17.9,18.01],
['2016-06-06',18.05,18.11,17.97,18.02],
['2016-06-07',18.1,18.13,17.97,18.02],
['2016-06-08',18.01,18.07,17.97,17.99],
['2016-06-13',17.86,17.94,17.77,17.78],
['2016-06-14',17.77,17.83,17.7,17.79],
['2016-06-15',17.61,17.76,17.55,17.74],
['2016-06-16',17.67,17.93,17.6,17.8],
['2016-06-17',17.75,17.99,17.74,17.77],
['2016-06-20',17.93,17.93,17.75,17.85],
['2016-06-21',17.88,17.95,17.75,17.78],
['2016-06-22',17.8,17.9,17.78,17.89],
['2016-06-23',15.9,15.9,15.71,15.72],
['2016-06-24',15.7,15.79,15.08,15.28],
['2016-06-27',15.29,15.39,15.18,15.31],
['2016-06-28',15.27,15.3,15.18,15.28],
['2016-06-29',15.29,15.54,15.28,15.5],
['2016-06-30',15.5,15.66,15.44,15.57],
['2016-07-01',15.57,15.96,15.54,15.92]]);

var data0 = splitData(limit_my_data);

// 数据意义：折线图的数据，即ema
// 数据意义：折线图的数据，即ema
// 数据格式： [2320,2291,2295,2346,2360,2383,2377,2425,2411,2432]
var data1 = [17.55,17.55,17.67,17.7,17.74,17.95,18.29,18.19,18.02,18.01,18.02,18.02,17.99,17.78,17.79,17.74,17.8,17.77,17.85,17.78,17.89,15.72,15.28,15.31,15.28,15.5,15.57,15.92];

// 切分数据，模板的写法
function splitData(rawData) {
    var categoryData = [];
    var values = []
    for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i])
    }
    return {
        categoryData: categoryData,
        values: values
    };
}



option = {
        backgroundColor: '#eee',
        animation: false,
        legend: {
            bottom: 10,
            left: 'center',
            data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            }
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: false
                },
                brush: {
                    type: ['lineX', 'clear']
                }
            }
        },
        grid: [
            {
                left: '10%',
                right: '8%',
                height: '50%'
            },
            {
                left: '10%',
                right: '8%',
                top: '63%',
                height: '16%'
            }
        ],
        xAxis: [
            {
                type: 'category',
                data: data.categoryData,
                scale: true,
                boundaryGap : false,
                axisLine: {onZero: false},
                splitLine: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
            },
            {
                type: 'category',
                gridIndex: 1,
                data: data.categoryData,
                scale: true,
                boundaryGap : false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
            }
        ],
        yAxis: [
            {
                scale: true,
                splitArea: {
                    show: true
                }
            },
            {
                scale: true,
                gridIndex: 1,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            }
        ],
        dataZoom: [
            {
                type: 'inside',
                xAxisIndex: [0, 1],
                start: 98,
                end: 100
            },
            {
                show: true,
                xAxisIndex: [0, 1],
                type: 'slider',
                top: '85%',
                start: 98,
                end: 100
            }
        ],
        series: [
            {
                name: 'Dow-Jones index',
                type: 'candlestick',
                data: data.values,
                itemStyle: {
                    normal: {
                        borderColor: null,
                        borderColor0: null
                    }
                }
            },
            {
                name: 'MA5',
                type: 'line',
                data: calculateMA(5, data),
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
            {
                name: 'Volumn',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: data1
            }
        ]
    };



        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>